<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>性能</title>
  <link href="css/bootstrap.css" rel="stylesheet">
  <style type="text/css">
  	.div{
  		border:1px solid #ddd;
  		height: 200px;
  		width: 250px;
  		padding: 30px;
  		margin: 20px;
  		overflow: auto;
  	}
  	.div ul{
  		margin: 0;
  		padding: 0;
  	}
  	.div li{
  		height: 50px;
  	}
  	.info{
  		
  	}
  </style>
</head>
<body id='body'>
	<div>
		<button class="btn" onclick="getWindowInfo()">显示window信息</button>	
		<button class="btn" onclick="getBodyInfo()">显示body信息</button>	
		<button class="btn" onclick="getInfo()">显示div信息</button>	
	</div>
	<div class="div" id="div">
		<ul>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
			<li>测试</li>
		</ul>
	</div>
	<div class="div info">
		<ul id="info" onclick="this.innerHTML=''">
			
		</ul>
	</div>

<script type="text/javascript">

var info = document.getElementById("info");
function getWindowInfo()
{
     out(" 浏览器距离屏幕顶部:"+ window.screenTop);
     out(" 浏览器距离屏幕左部:"+ window.screenLeft);
     out(" 屏幕分辨率的高："+ window.screen.height);
     out(" 屏幕分辨率的宽："+ window.screen.width);
     out(" 屏幕可用工作区高度去掉状态栏高度："+ window.screen.availHeight);
     out(" 屏幕可用工作区宽度："+ window.screen.availWidth);
     out(" 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色");
     out(" 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸");
    
}
function getBodyInfo()
{
	var target = document.body;
	 out(" 网页可见区域宽："+ target.clientWidth+ " (取出浏览器滚动条宽度)");
     out(" 网页可见区域高："+ target.clientHeight);
     out(" 网页可见区域宽："+ target.offsetWidth + " (包括边线和滚动条的宽)");
     out(" 网页可见区域高："+ target.offsetHeight + " (包括边线的宽)");
     out(" 网页正文全文宽："+ target.scrollWidth);
     out(" 对象的滚动高度："+ target.scrollHeight);
     out(" 网页被卷去的高(ff)："+ target.scrollTop);
     out(" 网页被卷去的高(ie)："+ document.documentElement.scrollTop);
     out(" 网页被卷去的左："+ target.scrollLeft);
 
}

function getInfo()
{
	var target = document.getElementById("div");
	 out(" 网页可见区域宽："+ target.clientWidth)
     out(" 网页可见区域高："+ target.clientHeight);
     out(" 网页可见区域宽："+ target.offsetWidth + " (包括边线和滚动条的宽)");
     out(" 网页可见区域高："+ target.offsetHeight + " (包括边线的宽)");
     out(" 网页正文全文宽："+ target.scrollWidth);
     out(" 网页正文全文高："+ target.scrollHeight);
     out(" 网页被卷去的高(ff)："+ target.scrollTop);
     out(" 网页被卷去的高(ie)："+ document.documentElement.scrollTop);
     out(" 网页被卷去的左："+ target.scrollLeft);
    
    
}

function out(s){
	if(false){
		console.log(s);
	}else{
		var li = document.createElement("li");
		li.innerHTML=s;
		info.appendChild(li);
	}
}

</script>
</body>
</html>